<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
    <div id="app">
<!--
通过{{数据的名字}}来获取数据
-->
        {{name}}<br>
        {{age}}<br>
<!--
获取数组指定位置的数据
-->
        {{aihao[2]}}<br>
<!--
可以写方法名来获取方法的返回值
-->
        {{dizhi()}}<br>
<!--
没有单独定义数据，而是直接用数据.key 获取到对应的内容
-->
        {{{"name": "xiaoyou", "age":20}.age}}
    </div>

</body>
<script>
    new Vue({
       el: "#app",
       data: {
           name: 'zhangsan',  //数据流的名字和值
           age: 18,
           aihao: [1,2,3,4]
       },
        methods: {
           dizhi:function () {
               return '北极光'
           }
        }
    });
</script>
</html>